<!-- 服务信息页面，暂时去掉 -->
<template>
  <div class="mod-menu">
    <el-table   :data="menus" row-key="menuId" border style="width: 100%"  :stripe="true"  fit :cell-style="{ background:'#eef1f6',color:'#606266' }" :header-cell-style="{ background: '#E5E9F4' }">


      <el-table-column
        prop="level"
        header-align="center"
        align="center"


        label="服务层级"
        stripe="true"
      >
      </el-table-column>
    <el-table-column
      prop="name"
      header-align="center"
      align="center"

      label="名称"
    >
    </el-table-column>


  <el-table-column
        prop="showStatus"

        header-align="center"
        align="center"
        label="状态"

      >
    <template   v-if="scope.row.menuCode!=='Nginx'"   slot-scope="scope">

          <el-tag v-if="scope.row.showStatus === 0" size="medium" type="danger"  effect="plain"
            >关闭</el-tag
          >
          <el-tag
            v-else-if="scope.row.showStatus=== 1"
            size="medium"
            type="success"
            effect="plain"
            >开启</el-tag>
          <el-tag
            v-else-if="scope.row.showStatus=== null"
            size="medium"
            type="danger"
            effect="plain"
          >异常</el-tag>

        </template>
      </el-table-column>


      <el-table-column
        prop="colony"
        header-align="center"
        align="center"

        label="集群数"
      >
      </el-table-column>


      <el-table-column
        prop="example"
        header-align="center"
        align="center"


        label="实例数">
      </el-table-column>



      <el-table-column

        header-align="center"

        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="small"
            @click="startsubProject(scope.row.menuCode)"
            >开启</el-button>

          <el-button
            type="danger"
            size="small"
            v-if="scope.row.menuCode!=='Nginx'"
            @click="shutsupProject(scope.row.menuCode)"
            >关闭</el-button>
        </template>
      </el-table-column>


      <el-table-column

        header-align="center"
        align="center"
        width="300"
        label="详细"
      >
        <template v-if="scope.row.menuCode!=='Nginx'" slot-scope="scope">
<!--          <el-button type="text" size="medium" @click="goToUrl(scope.row.menuId)">详细</el-button>-->
          <el-button   type="primary" size="small" @click="statusSub(scope.row.menuCode)">详细</el-button>
          <el-button type="success" size="small" @click="gotoSub(scope.row.url)" >访问</el-button>
          <el-button type="text" size="small" @click="drawEcharts(scope.row.menuCode)" >统计信息</el-button>

        </template>

      </el-table-column>



    </el-table>
    <!-- <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->


      <div id="chart" ref="Stastic"  style="width:500px;height:400px;padding-top:40px"  ></div>


  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// import * as echarts from 'echarts/core'
// echarts.use(
// )

import * as echarts from 'echarts'


export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    return {
      sta: {
        P1: null,
        P2: null,
        P3: null,
        P4: null
      },
      menus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false,
      chartL: []
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    getMenus () {
      this.$http({
        url: this.$http.adornUrl(
          '/service_controller/servicecontroller/list/tree'
        ),
        method: 'get'
      }).then(({ data }) => {
        console.log('成功得到菜單数据。。', data.data)
        this.menus = data.data
        console.log(this.menus)
      })
    },

    startsubProject (P) {
      this.$confirm(
        `确定对服务进行[${P ? '开启' : '批量开启'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl('/subProjectControl/Start' + P),
          method: 'post'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/service_controller/servicecontroller/ShowStatus1/' + P),
            method: 'post'
          })
        })
      })
    },
    shutsupProject (P) {
      this.$confirm(
        `确定对服务进行[${P ? '关闭' : '批量关闭'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl('/subProjectControl/Shut' + P),
          method: 'post'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/service_controller/servicecontroller/ShowStatus2/' + P),
            method: 'post'
          })
        })
      })
    },

    statusSub (P) {
      this.$http({
        url: this.$http.adornUrl('/subProjectControl/Status' + P),
        method: 'get'
      }).then(result => {
        alert('构件运行端口号：' + result.data)
      })
    },
    async statusSub_Show (P) {
      console.log('statusSub_Show')
      this.$http({
        url: this.$http.adornUrl('/subProjectControl/Status' + P),
        method: 'get'
      }).then(result => {
        if (result.data.length === 0) {
          console.log(0)
          this.sta[P] = 0
        } else {
          this.sta[P] = 1
        }
      })
    },
    gotoSub (url) {
      window.open(url, '_blank')
    },
    drawEcharts (P) {
      var mystastic
      this.$nextTick(() => this.$http({
        url: this.$http.adornUrl('/service_controller/servicecontroller/GetStastic/' + P),
        method: 'get'
      }).then(async result => {
        console.log(result.data.data)
        var option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '服务统计图',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: result.data.data
            }
          ]
        }

        if (mystastic != null && mystastic !== '' && mystastic !== undefined) {
          mystastic.dispose()
        }
        mystastic = echarts.init(document.getElementById('chart'))
        mystastic.setOption(option)
        window.addEventListener('resize', () => {
          mystastic.resize()
        })
      }))
    },
    showDialog (P) {
      // this.dialogVisible = true
      // 点击之后立即执行this.$nextTick这个函数
      // dom就是更新之后的dom了，this.$refs就能获取到dom的实例了
      this.$nextTick(() => this.$http({
        url: this.$http.adornUrl('/service_controller/servicecontroller/GetStastic/' + P),
        method: 'get'
      }).then(async result => {
        this.chartL = await result.data
        await this.drawEcharts(this.chart)
      }))
    }

  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    getStatus (P) {
      return this.sta[P]
    }
  },
  // 方法集合
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getMenus()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    window.setInterval(() => {
      setTimeout(() => {
        this.getMenus()
      }, 0)
    }, 3000)// 一分钟调用一次
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss">


.mod-menu {
  .menu-list__input,
  .icon-list__input {
    > .el-input__inner {
      cursor: pointer;
    }
  }
  &__icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
  .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
}

.chart{
  height: 1000px;
  width: 100%;

}
</style>















<!--deleteHandle1 (id) {-->
<!--var ids = id-->
<!--? [id]-->
<!--: this.dataListSelections.map((item) => {-->
<!--return item.menuId-->
<!--})-->
<!--this.$confirm(-->
<!--`确定对服务进行[${id ? '关闭' : '批量关闭'}]操作?`,-->
<!--'提示',-->
<!--{-->
<!--confirmButtonText: '确定',-->
<!--cancelButtonText: '取消',-->
<!--type: 'warning'-->
<!--}-->
<!--).then(() => {-->
<!--this.$http({-->
<!--url: this.$http.adornUrl(-->
<!--'/service_controller/servicecontroller/delete1'-->
<!--),-->
<!--method: 'post',-->
<!--data: this.$http.adornData(ids, false)-->
<!--}).then(({ data }) => {-->
<!--if (data && data.code === 0) {-->
<!--this.$message({-->
<!--message: '关闭成功',-->
<!--type: 'success',-->
<!--duration: 1500,-->
<!--onClose: () => {-->
<!--this.getMenus()-->
<!--}-->
<!--// this.getMenus();-->
<!--})-->
<!--} else {-->
<!--this.$message.error(data.msg)-->
<!--}-->
<!--})-->
<!--})-->
<!--},-->
<!--goTo () {-->
<!--this.$router.push('/i-50')-->
<!--},-->
<!--goToUrl (id) {-->
<!--this.$http({-->
<!--url: this.$http.adornUrl(-->
<!--'/service_controller/servicecontroller/Geturl'-->
<!--),-->
<!--method: 'post',-->
<!--data: this.$http.adornData(id, false)-->
<!--}).then(({data}) => {-->
<!--console.log(data.url)-->
<!--this.$router.push(data.url)-->
<!--})-->
<!--}-->



